<template>
    <div>
        <tree-node v-for="(item, index) in cloneData"
                   :key="index" :data="item"
                   :show-checkbox="showCheckbox"></tree-node>
    </div>
</template>

<script type="text/ecmascript-6">
  import TreeNode from './node.vue'
  import { deepClone } from '../../utils/assist.js'

  export default {
    name: 'Tree',
    components: { TreeNode },
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      },
      showCheckbox: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        cloneData: []
      }
    },
    created() {
      this.rebuildData()
    },
    methods: {
      rebuildData() {
        this.cloneData = deepClone(this.data)
      },
      emitEvent(eventName, data) {
        this.$emit(eventName, data, this.cloneData)
      }
    },
    watch: {
      data() {
        this.rebuildData()
      }
    },
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
